<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/_reset.css" />
    <link rel="stylesheet" href="./css/classification.css" />
  </head>
  <body>
    <!-- 整个大盒子 -->
    <div class="all">
      <!-- 顶部 -->
      <div class="top">
        <div class="back">
          <p>Back</p>
        </div>
        <div class="find"><p>分类</p></div>
        <div class="city">
          <div><p>广州市</p></div>
          <div class="city_img">
            <img src="./发现页和详细页/城市切换下拉.png" alt="" />
          </div>
        </div>
      </div>
      <div class="picture">
        <div><img src="./分类/图层1.png" alt="" /></div>
        <div><img src="./分类/图层3.png" alt="" /></div>
        <div><img src="./分类/图层4.png" alt="" /></div>
        <div><img src="./分类/图层5.png" alt="" /></div>
      </div>
      <div class="dot"><img src="./分类/形状10副本3.png" alt="" /></div>
      <!-- 美食 -->
      <div class="cate">
        <div class="cate_top">
          <div class="top-left">
            <div><img src="./分类/图层9.png" alt="" /></div>
            <p>美食类</p>
          </div>
          <div class="top-right">
            <p>更多</p>
            <div><img src="./分类/形状4副本.png" alt="" /></div>
          </div>
        </div>
      </div>
      <div class="cate_picture">
        <div><img src="./分类/图层10.png" alt="" /></div>
        <div><img src="./分类/图层11.png" alt="" /></div>
        <div><img src="./分类/图层12.png" alt="" /></div>
        <div><img src="./分类/图层13.png" alt="" /></div>
      </div>
      <!-- 运动 -->
      <div class="sports">
        <div class="sports_top">
          <div class="top-left">
            <div><img src="./分类/图层7.png" alt="" /></div>
            <p>运动类</p>
          </div>
          <div class="top-right">
            <p>更多</p>
            <div><img src="./分类/形状4副本.png" alt="" /></div>
          </div>
        </div>
      </div>
      <div class="cate_picture">
        <div><img src="./分类/图层14.png" alt="" /></div>
        <div><img src="./分类/图层15.png" alt="" /></div>
        <div><img src="./分类/图层16.png" alt="" /></div>
        <div><img src="./分类/图层17.png" alt="" /></div>
      </div>
      <!-- 电影 -->
      <div class="movie">
        <div class="movie_top">
          <div class="top-left">
            <div><img src="./分类/图层8.png" alt="" /></div>
            <p>电影类</p>
          </div>
          <div class="top-right">
            <p>更多</p>
            <div><img src="./分类/形状4副本.png" alt="" /></div>
          </div>
        </div>
      </div>
      <div class="cate_picture">
        <div><img src="./分类/图层18.png" alt="" /></div>
        <div><img src="./分类/图层19.png" alt="" /></div>
        <div><img src="./分类/图层18.png" alt="" /></div>
        <div><img src="./分类/图层19.png" alt="" /></div>
      </div>
      <!-- 底部 -->
      <div class="bottom">
        <div class="bottom_img">
          <div>
            <a href="./index.html"
              ><img src="./分类/首页.png" alt="" />
              <p>首页</p>
            </a>
          </div>
          <div>
            <a
              ><img src="./分类/分类4.png" alt="" />
              <p>分类</p>
            </a>
          </div>
          <div>
            <a href="./find.html"
              ><img src="./分类/形状7副本.png" alt="" />
              <p>发现</p>
            </a>
          </div>
          <div>
            <a href="./mine.html"
              ><img src="./分类/我的.png" alt="" />
              <p>我的</p>
            </a>
          </div>
        </div>
      </div>
      <!-- 空的div -->
      <div class="empty"></div>
    </div>
  </body>
</html>
